<div class="page page-general">

    <div class="row">
        <div class="col-md-6">

            <section class="panel panel-box">
                <div class="panel-top bg-success">
                    <div class="text-left">
                        Cloudy
                    </div>
                    <div class="divider divider-lg"></div>
                    <div class="divider divider-lg"></div>
                </div>
                <div class="panel-icon bg-success">
                    <i class="wi-day-cloudy"></i>
                </div>
                <div class="panel-bottom bg-reverse">
                    <ul class="list-justified text-center">
                        <li>
                            <p class="size-h2 text-info"><i class="wi-cloudy"></i></p>
                            <p class="text-muted">Tuesday</p>
                        </li>
                        <li>
                            <p class="size-h2 text-warning"><i class="wi-day-thunderstorm"></i></p>
                            <p class="text-muted">Wednesday</p>
                        </li>
                        <li>
                            <p class="size-h2 text-danger"><i class="wi-day-snow"></i></p>
                            <p class="text-muted">Thursday</p>
                        </li>
                        <li>
                            <p class="size-h2 text-success"><i class="wi-day-sunny"></i></p>
                            <p class="text-muted">Friday</p>
                        </li>                        
                    </ul>
                </div>
            </section>

            <!-- profile panel -->
            <div class="panel panel-profile">
                <div class="panel-heading text-center bg-info">
                    <img alt="" src="images/g1.jpg" class="img-circle img80_80">
                    <h3>{{main.name}}</h3>
                    <p>Project Manager</p>                    
                </div>
                <div class="list-justified-container">
                    <ul class="list-justified text-center">
                        <li>
                            <p class="size-h3">679</p>
                            <p class="text-muted">Tweets</p>
                        </li>
                        <li>
                            <p class="size-h3">575</p>
                            <p class="text-muted">Followers</p>
                        </li>
                        <li>
                            <p class="size-h3">23</p>
                            <p class="text-muted">Following</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- end profile panel -->


            <!-- mini box -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel mini-box">
                        <span class="box-icon bg-danger">
                            <i class="fa fa-film"></i>
                        </span>
                        <div class="box-info">
                            <p class="size-h2">39</p>
                            <p class="text-muted">Amazing Films</p>
                        </div>
                    </div>                    
                </div>
                <div class="col-sm-6">
                    <div class="panel mini-box">
                        <span class="box-icon bg-warning">
                            <i class="fa fa-camera"></i>
                        </span>
                        <div class="box-info">
                            <p class="size-h2">63</p>
                            <p class="text-muted">Wonderful Photos</p>
                        </div>
                    </div>                    
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel mini-box">
                        <span class="box-icon bg-success">
                            <i class="fa fa-bookmark-o"></i>
                        </span>
                        <div class="box-info">
                            <p class="size-h2">55</p>
                            <p class="text-muted">New Collections</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel mini-box">
                        <span class="box-icon bg-info">
                            <i class="fa fa-check"></i>
                        </span>
                        <div class="box-info">
                            <p class="size-h2">34</p>
                            <p class="text-muted">Tasks Finised</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end mini box -->

    
            <!-- List group -->
            <div class="panel panel-default">
                <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> List group</strong></div>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge">14</span>
                        Cras justo odio
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-warning">2</span>
                        Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-info">1</span>
                        Morbi leo risus
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-success">3</span>
                        Vestibulum at eros
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-danger">5</span>
                        Porta ac consectetur ac
                    </li>
                </ul>
            </div>
            <!-- end List group -->


            <!-- Panel box vertical -->
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-success">
                            <i class="fa fa-shopping-cart text-large"></i>
                        </div>
                        <div class="panel-bottom bg-reverse">
                            <p class="size-h1">369</p>
                            <p class="text-muted">Sales</p>
                        </div>
                    </section>
                </div>

                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-danger">
                            <i class="fa fa-user text-large"></i>
                        </div>
                        <div class="panel-bottom bg-reverse">
                            <p class="size-h1">231</p>
                            <p class="text-muted">New Users</p>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-warning">
                            <i class="fa fa-usd text-large"></i>
                        </div>
                        <div class="panel-bottom bg-reverse">
                            <p class="size-h1">4 600</p>
                            <p class="text-muted">Profit</p>
                        </div>
                    </section>
                </div>

                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-info">
                            <i class="fa fa-comments-o text-large"></i>
                        </div>
                        <div class="panel-bottom bg-reverse">
                            <p class="size-h1">56</p>
                            <p class="text-muted">New Messages</p>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-facebook">
                            <div class="divider divider"></div>
                            <i class="fa fa-facebook size-h1"></i>
                            <div class="divider divider"></div>
                        </div>
                        <div class="list-justified-container">
                            <ul class="list-justified text-center">
                                <li>
                                    <p class="size-h3">575</p>
                                    <p class="text-muted">Followers</p>
                                </li>
                                <li>
                                    <p class="size-h3">23</p>
                                    <p class="text-muted">Following</p>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel panel-box">
                        <div class="panel-top bg-twitter">
                            <div class="divider divider"></div>
                            <i class="fa fa-twitter size-h1"></i>
                            <div class="divider divider"></div>
                        </div>
                        <div class="list-justified-container">
                            <ul class="list-justified text-center">
                                <li>
                                    <p class="size-h3">575</p>
                                    <p class="text-muted">Followers</p>
                                </li>
                                <li>
                                    <p class="size-h3">23</p>
                                    <p class="text-muted">Following</p>
                                </li>
                            </ul>
                        </div>
                    </section>                        
                </div>
            </div>
            <!-- end Panel box vertical -->


            <!-- Breadcrumbs -->
            <div class="panel panel-default">
                <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Breadcrumbs</strong></div>
                <div class="panel-body">
                    <ol class="breadcrumb">
                        <li><a href="javascript:;">Home</a></li>
                        <li><a href="javascript:;">Library</a></li>
                        <li class="active">Data</li>
                    </ol>

                    <ol class="breadcrumb-alt">
                        <li><a href="javascript:;">Home</a></li>
                        <li><a href="javascript:;">Library</a></li>
                        <li class="active"><a href="">Data</a></li>
                    </ol>
                </div>
            </div>
            <!-- end Breadcrumbs -->


            <!-- Media object -->
            <div class="panel panel-default">
                <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Media object</strong></div>
                <div class="panel-body">
                    <div class="media">
                        <a class="pull-left" href="javascript:;">
                            <img alt="" src="images/g1.jpg" class="img-rounded img64_64">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce cfelis in faucibus.</p>
                        </div>
                    </div>
                    <div class="media">
                        <a class="pull-left" href="javascript:;">
                            <img alt="" src="images/g1.jpg" class="img-rounded img64_64">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at. Donec lacinia congue felis in faucibus.</p>

                            <div class="media">
                                <a class="pull-left" href="javascript:;">
                                    <img alt="" src="images/g1.jpg" class="img-rounded img64_64">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">Media heading</h4>
                                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus  Donec lacinia congue felis in faucibus.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end Media object -->

        </div>
        <div class="col-md-6">

            <!-- Pofile panel -->
            <div class="panel panel-profile">
                <div class="panel-heading bg-primary clearfix">
                    <a href="" class="pull-left profile">
                        <img alt="" src="images/g1.jpg" class="img-circle img80_80">
                    </a>
                    <h3>{{main.name}}</h3>
                    <p>Project Manager</p>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge">14</span>
                        <i class="fa fa-envelope-o"></i>
                        Cras justo odio
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-warning">2</span>
                        <i class="fa fa-comments-o"></i>
                        Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-info">1</span>
                        <i class="fa fa-heart-o"></i>
                        Morbi leo risus
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-success">3</span>
                        <i class="fa fa-folder-open-o"></i>
                        Vestibulum at eros
                    </li>
                </ul>
            </div>
            <!-- end Pofile panel -->


            <!-- Panel box -->
            <section class="panel panel-box">
                <div class="panel-left panel-item bg-facebook">
                    <p class="size-h1"><i class="fa fa-facebook"></i></p>
                    <p>Facebook</p>
                </div>
                <div class="panel-item bg-twitter">
                    <p class="size-h1"><i class="fa fa-twitter"></i></p>
                    <p>Twitter</p>
                </div>
                <div class="panel-right panel-item bg-google-plus">
                    <p class="size-h1"><i class="fa fa-google-plus"></i></p>
                    <p>Google Plus</p>
                </div>
            </section>
            <section class="panel panel-box">
                <div class="panel-left panel-item bg-info">
                    <i class="fa fa-sun-o text-huge"></i>
                </div>
                <div class="panel-right panel-item bg-reverse">
                    <p class="size-h1">66º</p>
                    <p class="text-muted">Another Sunny Day</p>
                </div>
            </section>
            <section class="panel panel-box">
                <div class="panel-left panel-item bg-reverse">
                    <p class="size-h1">59º</p>
                    <p class="text-muted">Cloudy Day</p>
                </div>
                <div class="panel-right panel-item bg-success">
                    <i class="fa fa-cloud text-huge"></i>
                </div>
            </section>
            <section class="panel panel-box">
                <div class="panel-left panel-item bg-warning">
                    <i class="fa fa-heart text-huge"></i>
                </div>
                <div class="panel-right panel-item bg-reverse">
                    <p class="size-h1">56</p>
                    <p class="text-muted">Gifts Received</p>
                </div>
            </section>

            <div class="row">
                <div class="col-xs-6">
                    <section class="panel panel-box info-box">
                        <div class="panel-left panel-item bg-success">
                            <i class="fa fa-rocket text-large stat-icon"></i>
                        </div>
                        <div class="panel-right panel-item bg-reverse">
                            <p class="size-h1 no-margin">80<span class="size-h3">%</span></p>
                            <p class="text-muted no-margin"><span data-i18n="Growth"></span></p>
                        </div>
                    </section>
                </div>

                <div class="col-xs-6">
                    <section class="panel panel-box info-box">
                        <div class="panel-left panel-item bg-info">
                            <i class="fa fa-users text-large stat-icon"></i>
                        </div>
                        <div class="panel-right panel-item bg-reverse">
                            <p class="size-h1 no-margin">132</p>
                            <p class="text-muted no-margin"><span data-i18n="New users"></span></p>
                        </div>
                    </section>
                </div>

                <div class="col-xs-6">
                    <section class="panel panel-box info-box">
                        <div class="panel-left panel-item bg-warning">
                            <i class="fa fa-dollar text-large stat-icon"></i>
                        </div>
                        <div class="panel-right panel-item bg-reverse">
                            <p class="size-h1 no-margin">3,760</p>
                            <p class="text-muted no-margin"><span data-i18n="Profit"></span></p>
                        </div>
                    </section>
                </div>

                <div class="col-xs-6">
                    <section class="panel panel-box info-box">
                        <div class="panel-left panel-item bg-danger">
                            <i class="fa fa-shopping-cart text-large stat-icon"></i>
                        </div>
                        <div class="panel-right panel-item bg-reverse">
                            <p class="size-h1 no-margin">369</p>
                            <p class="text-muted no-margin"><span data-i18n="Sales"></span></p>
                        </div>
                    </section>
                </div>
            </div>
            <!-- end Panel box -->


            <!-- Thumbnails -->
            <div class="panel panel-default">
                <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Thumbnails</strong></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="thumbnail">
                                <img alt="" src="images/assets/600_400-1.jpg">
                                <div class="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p><a href="javascript:;" class="btn btn-primary" role="button">Button</a> <a href="javascript:;" class="btn btn-default" role="button">Button</a></p>
                                </div>
                            </div>    
                        </div>
                        <div class="col-sm-6">
                            <div class="thumbnail">
                                <img alt="" src="images/assets/600_400-2.jpg">
                                <div class="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p><a href="javascript:;" class="btn btn-primary" role="button">Button</a> <a href="javascript:;" class="btn btn-default" role="button">Button</a></p>
                                </div>
                            </div>    
                        </div>
                    </div>            
                </div>
            </div>
            <!-- end Thumbnails -->


            <!-- Meida -->
            <div class="panel panel-default">
                <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Media</strong></div>
                <div class="panel-body">
                    <div class="media">
                        <div class="media-body">
                            <ul class="list-unstyled list-info">
                                <li>
                                    <span class="icon glyphicon glyphicon-user"></span>
                                    <label>User name</label>
                                    {{main.name}}
                                </li>
                                <li>
                                    <span class="icon glyphicon glyphicon-envelope"></span>
                                    <label>Email</label>
                                    lisa@doe.com
                                </li>
                                <li>
                                    <span class="icon glyphicon glyphicon-home"></span>
                                    <label>Address</label>
                                    Street 123, Avenue 45, Country
                                </li>
                                <li>
                                    <span class="icon glyphicon glyphicon-earphone"></span>
                                    <label>Contact</label>
                                    (+012) 345 6789
                                </li>
                                <li>
                                    <span class="icon glyphicon glyphicon-flag"></span>
                                    <label>Nationality</label>
                                    Australia
                                </li>
                                <li>
                                    <span class="icon glyphicon glyphicon-globe"></span>
                                    <label>Website</label>
                                    www.site.com
                                </li>
                            </ul>
                            
                        </div>
                    </div>
                </div>
            </div>
            <!-- end Media -->

            <section class="panel panel-box" data-ng-controller="sparklineCtrl">
                <div class="panel-top bg-success">
                    <div data-sparkline
                          data-data="demoData1.data"
                          data-options="demoData1.options"
                          ></div>
                </div>
                <div class="list-justified-container">
                    <ul class="list-justified text-center">
                        <li>
                            <p class="size-h3">575</p>
                            <p class="text-muted">Daily Page View</p>
                        </li>
                        <li>
                            <p class="size-h3">23</p>
                            <p class="text-muted">Sales</p>
                        </li>
                    </ul>
                </div>
            </section>


        </div>
    </div>

</div>